﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>时间组件 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>


<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#time" class="nav-link font-weight-bold"><span>Time</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#v-model-return-value" class="nav-link"><span>v-model返回值</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#disabled-and-readonly-states" class="nav-link"><span>禁用和只读状态</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#styling" class="nav-link"><span>式样</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#enabling-of-seconds-spinbutton" class="nav-link"><span>启用秒旋转按钮</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#hiding-the-top-selected-time-header" class="nav-link"><span>隐藏选定的顶部时间标题</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#border-and-padding" class="nav-link"><span>边框和填充</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#default-slot" class="nav-link"><span>默认插槽</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#events" class="nav-link"><span>事件</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#input-event" class="nav-link"><span>输入事件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#context-event" class="nav-link"><span>上下文事件</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#internationalization" class="nav-link"><span>Internationalization</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#understanding-the-hourcycle" class="nav-link"><span>了解hourCycle</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#forcing-12-or-24-hour-interface" class="nav-link"><span>强制12或24小时接口</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#accessibility" class="nav-link"><span>可访问性</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#implementation-notes" class="nav-link"><span>实施说明</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#see-also" class="nav-link"><span>另请参阅</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件引用</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-time" class="nav-link"><span>&lt;b-time&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>作为Vue.js插件导入</span></a></li>
</ul>
</li>
</ul>
</div>

<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

<nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
<ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active" target="_self">首页</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs" class="nuxt-link-active" target="_self">中文手册</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
<li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea="" aria-current="location">时间组件</span></li>
</ol>
</nav>
<div class="clearfix d-block"></div>
  <h1 class="bd-title" id="content">时间组件(Time)</h1>
  <p class="bd-lead">
    BootstrapVue的custom<code class="text-nowrap" translate="no">&lt;b-time&gt;</code>组件生成符合WAI-ARIA的时间选择小部件，该小部件可用于控制其他组件，或用于创建自定义的时间选择器输入。
  </p>
  <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>



<nav data-v-4abf2740="" class="bd-quick-links mb-3 d-xl-none" style="">
<header data-v-4abf2740="">
<button data-v-4abf2740="" type="button" class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed" aria-controls="bd-quick-links-collapse" aria-expanded="false"> Show page table of contents </button>
</header>
<ul data-v-4abf2740="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#v-model-return-value" class=""><span data-v-4abf2740="">v-model return value</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#disabled-and-readonly-states" class=""><span data-v-4abf2740="">Disabled and readonly states</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#styling" class=""><span data-v-4abf2740="">式样</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#enabling-of-seconds-spinbutton" class=""><span data-v-4abf2740="">Enabling of seconds spinbutton</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#hiding-the-top-selected-time-header" class=""><span data-v-4abf2740="">Hiding the top selected time header</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#border-and-padding" class=""><span data-v-4abf2740="">Border and padding</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#default-slot" class=""><span data-v-4abf2740="">Default slot</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#events" class=""><span data-v-4abf2740="">Events</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#input-event" class=""><span data-v-4abf2740="">input event</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#context-event" class=""><span data-v-4abf2740="">context event</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#internationalization" class=""><span data-v-4abf2740="">Internationalization</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#understanding-the-hourcycle" class=""><span data-v-4abf2740="">Understanding the hourCycle</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#forcing-12-or-24-hour-interface" class=""><span data-v-4abf2740="">Forcing 12 or 24 hour interface</span></a></li>
</ul>
</li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#accessibility" class=""><span data-v-4abf2740="">Accessibility</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#implementation-notes" class=""><span data-v-4abf2740="">Implementation notes</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#see-also" class=""><span data-v-4abf2740="">另请参阅</span></a> </li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#component-reference" class=""><span data-v-4abf2740="">组件引用</span></a>
<ul data-v-4abf2740="">
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#comp-ref-b-time" class=""><span data-v-4abf2740="">&lt;b-time&gt;</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#importing-individual-components" class=""><span data-v-4abf2740="">导入单个组件</span></a></li>
<li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#importing-as-a-plugin" class=""><span data-v-4abf2740="">Importing as a Vue.js plugin</span></a></li>
</ul>
</li>
</ul>
</nav>
<p>
  <code class="text-nowrap" translate="no">&lt;b-time&gt;</code>符合WAI-ARIA辅助功能，针对键盘控制（箭头键、上/下翻页键、home键和end键）进行了优化。还支持国际化，如果未指定区域设置，则默认为浏览器或页面的区域设置。
</p>
<p>
  如果需要将时间选择器用作自定义窗体控件输入，请改用<a href="/docs/components/form-timepicker" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-form-timepicker&gt;</code></a>组件。
</p>
<p>
  BootstrapVue <code class="text-nowrap" translate="no">v2.6.0</code>引入了<code class="text-nowrap" translate="no">&lt;b-time&gt;</code>组件。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-time">
<div class="row">
<div class="col-md-auto">
<div role="group" lang="en" class="b-time d-inline-flex flex-column text-center" aria-labelledby="__BVID__4660">
<header class="mb-2">
<output role="status" tabindex="-1" aria-live="polite" aria-atomic="true" class="border rounded d-block p-1 small text-center" id="__BVID__4660" for="__BVID__4660__spinbutton_hours_ __BVID__4660__spinbutton_minutes_ __BVID__4660__spinbutton_ampm_">
<bdi>No time selected</bdi>
</output>
</header>
<div role="group" tabindex="-1" class="d-flex align-items-center justify-content-center mx-auto" aria-labelledby="__BVID__4660">
<div role="group" lang="en" tabindex="-1" title="Hours" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4660__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Hours" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="23" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4660__spinbutton_hours_" aria-controls="__BVID__4660">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4660__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="en" tabindex="-1" title="Minutes" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4660__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Minutes" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4660__spinbutton_minutes_" aria-controls="__BVID__4660">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4660__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div role="group" lang="en" tabindex="-1" title="AM/PM" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column ml-2">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4660__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="AM" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4660__spinbutton_ampm_" aria-controls="__BVID__4660">
<bdi class="w-100">AM</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4660__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="col">
<p>Value: <b>''</b></p>
<p class="mb-0">Context:</p>
<figure class="highlight"><pre class="small">{
  "locale": "en",
  "isRTL": false,
  "hourCycle": "h12",
  "hour12": true,
  "hours": null,
  "minutes": null,
  "seconds": 0,
  "value": "",
  "formatted": "No time selected"
}</pre></figure>
</div>
</div>
</div>
<div class="bd-code">
<figure class="highlight"><pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"auto"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-time</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span> @<span class="hljs-attr">context</span>=<span class="hljs-string">"onContext"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-time</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>'{{ value }}'<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>Context:<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>&gt;</span>{{ context }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">context</span>: <span class="hljs-literal">null</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      onContext(ctx) {
        <span class="hljs-keyword">this</span>.context = ctx
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
</div>
<h2 id="v-model-return-value" class="bv-no-focus-ring"><span class="bd-content-title"><code class="text-nowrap" translate="no">v-model</code> return value 返回值<a class="anchorjs-link" href="#v-model-return-value" aria-labelledby="v-model-return-value"></a></span></h2>
<p>
  <code class="text-nowrap" translate="no">&lt;b-time&gt;</code>
  始终返回<code class="text-nowrap" translate="no">HH:mm:ss</code>
  格式的字符串，该格式与本机浏览器<code class="text-nowrap" translate="no">&lt;input type="time"&gt;</code>
  控件返回的格式相同。该值将在<code class="text-nowrap" translate="no">'00:00:00'</code>
  到<code class="text-nowrap" translate="no">'23:59:59'</code>的范围内（使用<code class="text-nowrap" translate="no">'h23'</code>小时循环语法的24小时时钟）
</p>
<p>
  如果未选择时间，则<code class="text-nowrap" translate="no">&lt;b-time&gt;</code>返回空字符串（<code class="text-nowrap" translate="no">''</code>）。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-time-disabled-readonly">
<div>
<fieldset class="form-group" id="__BVID__4665">
<legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__4665__BV_label_">Select time interactive state</legend>
<div tabindex="-1" role="group" class="bv-no-focus-ring">
<div role="radiogroup" tabindex="-1" class="bv-no-focus-ring" aria-controls="ex-disabled-readonly" id="__BVID__4666">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="disabled" id="__BVID__4667" name="__BVID__4666">
<label class="custom-control-label" for="__BVID__4667">Disabled</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="readonly" id="__BVID__4668" name="__BVID__4666">
<label class="custom-control-label" for="__BVID__4668">Readonly</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" autocomplete="off" class="custom-control-input" value="normal" id="__BVID__4669" name="__BVID__4666">
<label class="custom-control-label" for="__BVID__4669">Normal</label>
</div>
</div>
</div>
</fieldset>
<div role="group" lang="zh-CN" aria-labelledby="ex-disabled-readonly" aria-disabled="true" class="b-time d-inline-flex flex-column text-center">
<header class="mb-2">
<output id="ex-disabled-readonly" role="status" for="ex-disabled-readonly__spinbutton_hours_ ex-disabled-readonly__spinbutton_minutes_ ex-disabled-readonly__spinbutton_ampm_" aria-live="polite" aria-atomic="true" class="border rounded d-block p-1 small text-center disabled">
<bdi>No time selected</bdi>
</output>
</header>
<div role="group" aria-labelledby="ex-disabled-readonly" class="d-flex align-items-center justify-content-center mx-auto">
<div role="group" lang="zh-CN" title="Hours" class="b-form-spinbutton form-control p-0 disabled d-inline-flex flex-column">
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="ex-disabled-readonly__spinbutton_hours_" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" id="ex-disabled-readonly__spinbutton_hours_" role="spinbutton" aria-live="off" aria-label="Hours" aria-controls="ex-disabled-readonly" aria-valuemin="0" aria-valuemax="23" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="ex-disabled-readonly__spinbutton_hours_" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column text-muted">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="zh-CN" title="Minutes" class="b-form-spinbutton form-control p-0 disabled d-inline-flex flex-column">
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="ex-disabled-readonly__spinbutton_minutes_" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" id="ex-disabled-readonly__spinbutton_minutes_" role="spinbutton" aria-live="off" aria-label="Minutes" aria-controls="ex-disabled-readonly" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="ex-disabled-readonly__spinbutton_minutes_" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div role="group" lang="zh-CN" title="AM/PM" class="b-form-spinbutton form-control p-0 disabled d-inline-flex flex-column ml-2">
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="ex-disabled-readonly__spinbutton_ampm_" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" id="ex-disabled-readonly__spinbutton_ampm_" role="spinbutton" aria-live="off" aria-label="AM/PM" aria-controls="ex-disabled-readonly" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="AM" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom">
<bdi class="w-100">AM</bdi>
</output>
<button tabindex="-1" type="button" disabled="disabled" aria-disabled="true" aria-controls="ex-disabled-readonly__spinbutton_ampm_" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="bd-code">
<figure class="highlight"><pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Select time interactive state"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"state"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"ex-disabled-readonly"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"disabled"</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"readonly"</span>&gt;</span>Readonly<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"normal"</span>&gt;</span>Normal<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-time</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ex-disabled-readonly"</span> <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span> <span class="hljs-attr">:readonly</span>=<span class="hljs-string">"readonly"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-time</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">state</span>: <span class="hljs-string">'disabled'</span>
      }
    },
    <span class="hljs-attr">computed</span>: {
      disabled() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.state === <span class="hljs-string">'disabled'</span>
      },
      readonly() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.state === <span class="hljs-string">'readonly'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
</div>
<h2 id="styling" class="bv-no-focus-ring"><span class="bd-content-title">式样<a class="anchorjs-link" href="#styling" aria-labelledby="styling"></a></span></h2>
<h3 id="enabling-of-seconds-spinbutton" class="bv-no-focus-ring"><span class="bd-content-title">Enabling of seconds spinbutton 启用秒旋转按钮<a class="anchorjs-link" href="#enabling-of-seconds-spinbutton" aria-labelledby="enabling-of-seconds-spinbutton"></a></span></h3>
<p>
  默认情况下，不会显示“秒”微调按钮。若要启用秒部分，请将<code class="text-nowrap" translate="no">show-seconds</code>属性设置为<code class="text-nowrap" translate="no">true</code>，以启用“秒选择”微调按钮。当<code class="text-nowrap" translate="no">show-seconds</code>
  为<code class="text-nowrap" translate="no">false</code>（或未提供）时，返回值将始终将时间字符串的seconds部分设置为<code class="text-nowrap" translate="no">00</code>。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-time-show-seconds">
<div role="group" lang="en" class="b-time d-inline-flex flex-column text-center" aria-labelledby="__BVID__4675">
<header class="mb-2">
<output role="status" tabindex="-1" aria-live="polite" aria-atomic="true" class="border rounded d-block p-1 small text-center" id="__BVID__4675" for="__BVID__4675__spinbutton_hours_ __BVID__4675__spinbutton_minutes_ __BVID__4675__spinbutton_seconds_ __BVID__4675__spinbutton_ampm_">
<bdi>No time selected</bdi>
</output>
</header>
<div role="group" tabindex="-1" class="d-flex align-items-center justify-content-center mx-auto" aria-labelledby="__BVID__4675">
<div role="group" lang="en" tabindex="-1" title="Hours" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4675__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Hours" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="23" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4675__spinbutton_hours_" aria-controls="__BVID__4675">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4675__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="en" tabindex="-1" title="Minutes" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4675__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Minutes" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4675__spinbutton_minutes_" aria-controls="__BVID__4675">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4675__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="en" tabindex="-1" title="Seconds" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4675__spinbutton_seconds_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Seconds" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4675__spinbutton_seconds_" aria-controls="__BVID__4675">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4675__spinbutton_seconds_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div role="group" lang="en" tabindex="-1" title="AM/PM" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column ml-2">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4675__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="AM" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4675__spinbutton_ampm_" aria-controls="__BVID__4675">
<bdi class="w-100">AM</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4675__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
<div class="mt-2">Value: ''</div>
</div>
<div class="bd-code">
<figure class="highlight"><pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-time</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">show-seconds</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-time</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-2"</span>&gt;</span>Value: '{{ value }}'<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
</div>
<h3 id="hiding-the-top-selected-time-header" class="bv-no-focus-ring"><span class="bd-content-title">Hiding the top selected time header 隐藏选定的顶部时间标题<a class="anchorjs-link" href="#hiding-the-top-selected-time-header" aria-labelledby="hiding-the-top-selected-time-header"></a></span></h3>
<p>
  默认情况下，当前选定的时间将显示在时间组件的顶部，并以区域设置的语言进行格式化。
</p>
<p>
  您可以通过<code class="text-nowrap" translate="no">hide-header</code>道具隐藏此标题。注意，这只会在视觉上隐藏所选时间，同时使屏幕阅读器用户可以将其作为<code class="text-nowrap" translate="no">aria-live</code>活动区域使用。
</p>
<h3 id="border-and-padding" class="bv-no-focus-ring"><span class="bd-content-title">Border and padding 边框和填充<a class="anchorjs-link" href="#border-and-padding" aria-labelledby="border-and-padding"></a></span></h3>
<p>想要一个有填充边框的时间控件吗？使用引导程序的边框和填充实用程序类添加边框和填充：</p>
<div translate="translate" class="bd-example vue-example vue-example-b-time-border-padding">
<div role="group" lang="en" class="b-time d-inline-flex flex-column text-center border rounded p-2" aria-labelledby="__BVID__4681">
<header class="mb-2">
<output role="status" tabindex="-1" aria-live="polite" aria-atomic="true" class="border rounded d-block p-1 small text-center" id="__BVID__4681" for="__BVID__4681__spinbutton_hours_ __BVID__4681__spinbutton_minutes_ __BVID__4681__spinbutton_ampm_">
<bdi>No time selected</bdi>
</output>
</header>
<div role="group" tabindex="-1" class="d-flex align-items-center justify-content-center mx-auto" aria-labelledby="__BVID__4681">
<div role="group" lang="en" tabindex="-1" title="Hours" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4681__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Hours" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="23" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4681__spinbutton_hours_" aria-controls="__BVID__4681">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4681__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="en" tabindex="-1" title="Minutes" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4681__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Minutes" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4681__spinbutton_minutes_" aria-controls="__BVID__4681">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4681__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div role="group" lang="en" tabindex="-1" title="AM/PM" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column ml-2">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4681__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="AM" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4681__spinbutton_ampm_" aria-controls="__BVID__4681">
<bdi class="w-100">AM</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4681__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="bd-code">
<figure class="highlight"><pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-time</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"border rounded p-2"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-time</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
</div>
<h3 id="default-slot" class="bv-no-focus-ring"><span class="bd-content-title">Default slot 默认插槽<a class="anchorjs-link" href="#default-slot" aria-labelledby="default-slot"></a></span></h3>
<p>通过使用默认广告位，在时间界面的底部提供可选内容。 该插槽可用于添加按钮，例如“立即”或“重置”等。</p>
<div translate="translate" class="bd-example vue-example vue-example-b-time-default-slot">
<div role="group" lang="en" class="b-time d-inline-flex flex-column text-center" aria-labelledby="__BVID__4686">
<header class="mb-2">
<output role="status" tabindex="-1" aria-live="polite" aria-atomic="true" class="border rounded d-block p-1 small text-center" id="__BVID__4686" for="__BVID__4686__spinbutton_hours_ __BVID__4686__spinbutton_minutes_ __BVID__4686__spinbutton_seconds_ __BVID__4686__spinbutton_ampm_">
<bdi>No time selected</bdi>
</output>
</header>
<div role="group" tabindex="-1" class="d-flex align-items-center justify-content-center mx-auto" aria-labelledby="__BVID__4686">
<div role="group" lang="en" tabindex="-1" title="Hours" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4686__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Hours" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="23" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4686__spinbutton_hours_" aria-controls="__BVID__4686">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4686__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="en" tabindex="-1" title="Minutes" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4686__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Minutes" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4686__spinbutton_minutes_" aria-controls="__BVID__4686">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4686__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="en" tabindex="-1" title="Seconds" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4686__spinbutton_seconds_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Seconds" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4686__spinbutton_seconds_" aria-controls="__BVID__4686">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4686__spinbutton_seconds_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div role="group" lang="en" tabindex="-1" title="AM/PM" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column ml-2">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4686__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="AM" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4686__spinbutton_ampm_" aria-controls="__BVID__4686">
<bdi class="w-100">AM</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4686__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
<footer class="mt-2">
<div dir="ltr" class="d-flex">
<button type="button" class="btn ml-auto btn-outline-primary btn-sm"> Set Now </button>
</div>
</footer>
</div>
</div>
<div class="bd-code">
<figure class="highlight"><pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-time</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">show-seconds</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex"</span> <span class="hljs-attr">dir</span>=<span class="hljs-string">"ltr"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
        <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
        <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span>
        <span class="hljs-attr">v-if</span>=<span class="hljs-string">"value"</span>
        @<span class="hljs-attr">click</span>=<span class="hljs-string">"clearTime"</span>
      &gt;</span>
        Clear time
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
        <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
        <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-primary"</span>
        <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-auto"</span>
        @<span class="hljs-attr">click</span>=<span class="hljs-string">"setNow"</span>
      &gt;</span>
        Set Now
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-time</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-literal">null</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      setNow() {
        <span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()
        <span class="hljs-comment">// Grab the HH:mm:ss part of the time string</span>
        <span class="hljs-keyword">this</span>.value = now.toTimeString().slice(<span class="hljs-number">0</span>, <span class="hljs-number">8</span>)
      },
      clearTime() {
        <span class="hljs-keyword">this</span>.value = <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
</div>
<h2 id="events" class="bv-no-focus-ring"><span class="bd-content-title">事件<a class="anchorjs-link" href="#events" aria-labelledby="events"></a></span></h2>
<h3 id="input-event" class="bv-no-focus-ring"><span class="bd-content-title"><code class="text-nowrap" translate="no">input</code> event<a class="anchorjs-link" href="#input-event" aria-labelledby="input-event"></a></span></h3>
<p>
  更新 <code class="text-nowrap" translate="no">v-model</code>时会发出 <code class="text-nowrap" translate="no">'input'</code>事件。事件有一个参数，
  该参数是作为字符串选择的时间。该值是<code class="text-nowrap" translate="no">'HH:mm:ss'</code>格式的字符串（如果未选择时间，则为空字符串）。有效值在
  <code class="text-nowrap" translate="no">'00:00:00'</code>到<code class="text-nowrap" translate="no">23:59:59'</code>的范围内。
</p>
<p>
  如果未设置<code class="text-nowrap" translate="no">show-seconds</code>属性，则时间值的秒数部分将始终为<code class="text-nowrap" translate="no">'00'</code>。
  </p>
<p>
  如果设置了<code class="text-nowrap" translate="no">disabled</code>或<code class="text-nowrap" translate="no">readonly</code>属性，则<strong>不会</strong>发出<code class="text-nowrap" translate="no">'input'</code>事件。
</p>
<h3 id="context-event" class="bv-no-focus-ring"><span class="bd-content-title"><code class="text-nowrap" translate="no">context</code> event<a class="anchorjs-link" href="#context-event" aria-labelledby="context-event"></a></span></h3>
<p>
  每当用户选择时间或更改其中一个微调按钮的值时，都会发出 <code class="text-nowrap" translate="no">'context'</code>事件。当组件被创建时（就在插入到DOM之前），或者当解析的语言环境发生更改时，它也会被发出。
</p>
<p>
  当设置了<code class="text-nowrap" translate="no">disabled</code>或<code class="text-nowrap" translate="no">readonly</code>属性时，不会发出该事件（创建时间组件时的初始发出除外）。
</p>
<p>
  <code class="text-nowrap" translate="no">'context'</code>事件作为唯一参数传递给一个context对象，该对象具有以下属性：
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="text-nowrap" translate="no">value</code></td>
<td>
  当前值为<code class="text-nowrap" translate="no">HH:mm:ss</code>字符串或空字符串（如果未选择时间）
</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">formatted</code></td>
<td>
  在已解析的区域设置中格式化的当前值，如果未选择时间，则为<code class="text-nowrap" translate="no">标签无时间属性</code>值</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">hours</code></td>
<td>
  当前选定的小时（始终为24小时，<code class="text-nowrap" translate="no">h23'</code>格式）为数字，如果没有小时则为<code class="text-nowrap" translate="no">空</code>
</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">minutes</code></td>
<td>
  当前选定的分钟为数字，如果没有分钟则为<code class="text-nowrap" translate="no">空</code>
</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">seconds</code></td>
<td>当前选定的秒值为数字，如果没有秒值则为<code class="text-nowrap" translate="no">空</code></td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">locale</code></td>
<td>
  时间选择器解析的区域设置，这可能与请求的区域设置不同
</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">isRTL</code></td>
<td>
  如果语言环境是RTL（从右到左），则为<code class="text-nowrap" translate="no">true</code>
</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">hour12</code></td>
<td>指示接口是否使用12小时格式的布尔值</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">hourCycle</code></td>
<td>
  表示用于旋转按钮的小时周期类型的字符串：<code class="text-nowrap" translate="no">'h11'</code>、<code class="text-nowrap" translate="no">'h12'
  </code>、<code class="text-nowrap" translate="no">'h23'</code>或<code class="text-nowrap" translate="no">'h24'</code>
</td>
</tr>
</tbody>
</table>
</div>
<p>
  有关上下文属性<code class="text-nowrap" translate="no">locale</code>、<code class="text-nowrap" translate="no">hour12</code>和<code class="text-nowrap" translate="no">hourCycle</code>的信息，请参阅<a href="#internationalization" class="font-weight-bold">Internationalization section</a>部分。
</p>
<h2 id="internationalization" class="bv-no-focus-ring"><span class="bd-content-title">Internationalization 国际化<a class="anchorjs-link" href="#internationalization" aria-labelledby="internationalization"></a></span></h2>
<p>
  时间接口的国际化通过<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat" target="_blank" rel="noopener">
    <code class="text-nowrap" translate="no">Intl.DateTimeFormat</code></a>
    和<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank" rel="noopener">
      <code class="text-nowrap" translate="no">Intl.NumberFormat</code></a>
      提供，但应用于时间控件元素（aria标签、选定状态等）的标签除外。您必须为这些标签提供自己的翻译。可用的区域设置将取决于浏览器（并非所有浏览器都支持所有区域设置）。
</p>
<p>
  默认情况下<code class="text-nowrap" translate="no">&lt;b-time&gt;</code>
  将使用浏览器的默认区域设置，但您可以通过<code class="text-nowrap" translate="no">区域设置</code>属性指定要使用的区域设置（或区域设置）。该属性接受单个区域设置字符串或区域设置字符串数组（按最首选区域设置到最不首选区域设置的顺序列出）。
</p>
<p>
  发出的<code class="text-nowrap" translate="no">'context'</code>事件将包括时间控件解析到的区域设置（可能与请求的区域设置不同，具体取决于支持的<code class="text-nowrap" translate="no">Intl</code>区域设置）。
</p>
<p>
  对于使用Node.js时的服务器端呈现（SSR），请确保正在使用的Node.js运行时支持<code class="text-nowrap" translate="no">Intl</code>和将要使用的区域设置。有关详细信息，请参阅<a href="https://nodejs.org/api/intl.html" target="_blank" rel="noopener">Node Intl support documentation</a>。
</p>
<div translate="translate" class="bd-example vue-example vue-example-b-time-i18n">
<div class="row">
<div class="mb-3 col-12">
<label for="example-locales">Locale:</label>
<select id="example-locales" class="custom-select">
<option value="en-US">English US (en-US)</option>
<option value="de">German (de)</option>
<option value="ar-EG">Arabic Egyptian (ar-EG)</option>
<option value="zh">Chinese (zh)</option>
</select>
</div>
<div class="col-md-auto">
<div role="group" lang="en-US" class="b-time d-inline-flex flex-column text-center" aria-labelledby="__BVID__4693">
<header class="mb-2">
<output role="status" tabindex="-1" aria-live="polite" aria-atomic="true" class="border rounded d-block p-1 small text-center" id="__BVID__4693" for="__BVID__4693__spinbutton_hours_ __BVID__4693__spinbutton_minutes_ __BVID__4693__spinbutton_seconds_ __BVID__4693__spinbutton_ampm_">
<bdi>No time selected</bdi>
</output>
</header>
<div role="group" tabindex="-1" class="d-flex align-items-center justify-content-center mx-auto" aria-labelledby="__BVID__4693">
<div role="group" lang="en-US" tabindex="-1" title="Hours" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4693__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Hours" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="23" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4693__spinbutton_hours_" aria-controls="__BVID__4693">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4693__spinbutton_hours_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="en-US" tabindex="-1" title="Minutes" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4693__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Minutes" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4693__spinbutton_minutes_" aria-controls="__BVID__4693">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4693__spinbutton_minutes_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div aria-hidden="true" class="d-flex flex-column">
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 -5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
<g transform="translate(0 5)">
<g transform="translate(10 10) scale(0.5 0.5) translate(-10 -10)">
<circle cx="10" cy="10" r="8"></circle>
</g>
</g>
</svg>
</div>
<div role="group" lang="en-US" tabindex="-1" title="Seconds" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4693__spinbutton_seconds_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="Seconds" aria-invalid="true" aria-required="true" aria-valuemin="0" aria-valuemax="59" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4693__spinbutton_seconds_" aria-controls="__BVID__4693">
<bdi class="w-100">--</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4693__spinbutton_seconds_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
<div role="group" lang="en-US" tabindex="-1" title="AM/PM" class="b-form-spinbutton form-control p-0 d-inline-flex flex-column ml-2">
<button tabindex="-1" type="button" aria-label="Increment" aria-keyshortcuts="ArrowUp" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4693__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-plus b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M10 5.5a.5.5 0 01.5.5v4a.5.5 0 01-.5.5H6a.5.5 0 010-1h3.5V6a.5.5 0 01.5-.5z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M9.5 10a.5.5 0 01.5-.5h4a.5.5 0 010 1h-3.5V14a.5.5 0 01-1 0v-4z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>

<output dir="ltr" role="spinbutton" tabindex="0" aria-live="off" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="AM" class="flex-grow-1 d-flex align-items-center py-1 mx-1 border-top border-bottom" id="__BVID__4693__spinbutton_ampm_" aria-controls="__BVID__4693">
<bdi class="w-100">AM</bdi>
</output>
<button tabindex="-1" type="button" aria-label="Decrement" aria-keyshortcuts="ArrowDown" class="btn btn-sm border-0 rounded-0" aria-controls="__BVID__4693__spinbutton_ampm_">
<div>
<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-dash b-icon bi">
<g transform="translate(10 10) scale(1.25 1.25) translate(-10 -10)">
<path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</g>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="col">
<p>Value: <b>''</b></p>
<p class="mb-0">Context:</p>
<figure class="highlight"><pre class="small">{
  "locale": "en-US",
  "isRTL": false,
  "hourCycle": "h12",
  "hour12": true,
  "hours": null,
  "minutes": null,
  "seconds": null,
  "value": "",
  "formatted": "No time selected"
}</pre></figure>
</div>
</div>
</div>
<div class="bd-code">
<figure class="highlight"><pre class="hljs html p-2 xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example-locales"</span>&gt;</span>Locale:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-locales"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"locale"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"locales"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"auto"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-time</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
        <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"labels[locale] || {}"</span>
        <span class="hljs-attr">:locale</span>=<span class="hljs-string">"locale"</span>
        <span class="hljs-attr">show-seconds</span>
        @<span class="hljs-attr">context</span>=<span class="hljs-string">"onContext"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-time</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>'{{ value }}'<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>Context:<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>&gt;</span>{{ context }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">context</span>: <span class="hljs-literal">null</span>,
        <span class="hljs-attr">locale</span>: <span class="hljs-string">'en-US'</span>,
        <span class="hljs-attr">locales</span>: [
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'en-US'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'English US (en-US)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'de'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'German (de)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'ar-EG'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Arabic Egyptian (ar-EG)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'zh'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Chinese (zh)'</span> }
        ],
        <span class="hljs-attr">labels</span>: {
          <span class="hljs-attr">de</span>: {
            <span class="hljs-attr">labelHours</span>: <span class="hljs-string">'Stunden'</span>,
            <span class="hljs-attr">labelMinutes</span>: <span class="hljs-string">'Minuten'</span>,
            <span class="hljs-attr">labelSeconds</span>: <span class="hljs-string">'Sekunden'</span>,
            <span class="hljs-attr">labelIncrement</span>: <span class="hljs-string">'Erhöhen'</span>,
            <span class="hljs-attr">labelDecrement</span>: <span class="hljs-string">'Verringern'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'Ausgewählte Zeit'</span>,
            <span class="hljs-attr">labelNoTimeSelected</span>: <span class="hljs-string">'Keine Zeit ausgewählt'</span>
          },
          <span class="hljs-string">'ar-EG'</span>: {
            <span class="hljs-attr">labelHours</span>: <span class="hljs-string">'ساعات'</span>,
            <span class="hljs-attr">labelMinutes</span>: <span class="hljs-string">'الدقائق'</span>,
            <span class="hljs-attr">labelSeconds</span>: <span class="hljs-string">'ثواني'</span>,
            <span class="hljs-attr">labelAmpm</span>: <span class="hljs-string">'صباحا مساء'</span>,
            <span class="hljs-attr">labelAm</span>: <span class="hljs-string">'ص'</span>,
            <span class="hljs-attr">labelPm</span>: <span class="hljs-string">'م'</span>,
            <span class="hljs-attr">labelIncrement</span>: <span class="hljs-string">'زيادة'</span>,
            <span class="hljs-attr">labelDecrement</span>: <span class="hljs-string">'إنقاص'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'الوقت المحدد'</span>,
            <span class="hljs-attr">labelNoTimeSelected</span>: <span class="hljs-string">'لا وقت المختار'</span>
          },
          <span class="hljs-attr">zh</span>: {
            <span class="hljs-attr">labelHours</span>: <span class="hljs-string">'小时'</span>,
            <span class="hljs-attr">labelMinutes</span>: <span class="hljs-string">'分钟'</span>,
            <span class="hljs-attr">labelSeconds</span>: <span class="hljs-string">'秒'</span>,
            <span class="hljs-attr">labelAmpm</span>: <span class="hljs-string">'上午下午'</span>,
            <span class="hljs-attr">labelAm</span>: <span class="hljs-string">'上午'</span>,
            <span class="hljs-attr">labelPm</span>: <span class="hljs-string">'下午'</span>,
            <span class="hljs-attr">labelIncrement</span>: <span class="hljs-string">'增量'</span>,
            <span class="hljs-attr">labelDecrement</span>: <span class="hljs-string">'减量'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'选定时间'</span>,
            <span class="hljs-attr">labelNoTimeSelected</span>: <span class="hljs-string">'没有选择时间'</span>
          }
        }
      }
    },
    <span class="hljs-attr">methods</span>: {
      onContext(ctx) {
        <span class="hljs-keyword">this</span>.context = ctx
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
</div>
<h3 id="understanding-the-hourcycle" class="bv-no-focus-ring"><span class="bd-content-title">Understanding the <code class="text-nowrap" translate="no">hourCycle</code><a class="anchorjs-link" href="#understanding-the-hourcycle" aria-labelledby="understanding-the-hourcycle"></a> 了解hourCycle</span></h3>
<p>
  世界上有两种主要的计时惯例：12小时制和24小时制。<code class="text-nowrap" translate="no">hourCycle</code>
  属性允许您访问特定区域设置使用的时钟类型。小时循环类型可以有几个不同的值，如下表所示。<code class="text-nowrap" translate="no">hourCycle</code>
  表示时间<code class="text-nowrap" translate="no">'00:00:00'</code>（一天的开始）应如何呈现/格式化给特定区域设置的用户。
  <a href="#context-event" class="font-weight-bold"><code class="text-nowrap" translate="no">'context'</code> event</a>
  包括已解析的<code class="text-nowrap" translate="no">hourCycle</code> 值。
</p>
<div class="table-responsive-sm">
<table class="b-table table table-bordered table-striped bv-docs-table">
<thead class="thead-default">
<tr>
<th><code class="text-nowrap" translate="no">hourCycle</code></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="text-nowrap" translate="no">'h12'</code></td>
<td>
  使用<code class="text-nowrap" translate="no">1</code>–<code class="text-nowrap" translate="no">12</code>小时制。12小时制，午夜12点开始
</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">'h23'</code></td>
<td>
  使用<code class="text-nowrap" translate="no">0</code>–<code class="text-nowrap" translate="no">23</code>的小时制。24小时制，午夜从0:00开始
</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">'h11'</code></td>
<td>
  使用<code class="text-nowrap" translate="no">0</code>–<code class="text-nowrap" translate="no">11</code>的小时制。12小时制，午夜从凌晨0点开始
</td>
</tr>
<tr>
<td><code class="text-nowrap" translate="no">'h24'</code></td>
<td>
  使用<code class="text-nowrap" translate="no">1</code>–<code class="text-nowrap" translate="no">24</code>小时制。24小时制，午夜从24:00开始
</td>
</tr>
</tbody>
</table>
</div>
<p>
  原生HTML5<code class="text-nowrap" translate="no">&lt;input type="date"&gt;</code>
  以<code class="text-nowrap" translate="no">'h23'</code>格式返回时间值，<b-time>也以 <code class="text-nowrap" translate="no">'h23'</code>
    格式返回v-model。此值可能不同于通过 <code class="text-nowrap" translate="no">&lt;b-time&gt;</code>
    组件的GUI（旋转按钮）向用户显示的值，具体取决于所选的<a href="#internationalization" class="font-weight-bold">locale selected</a>。
</p>
<p><strong>注意:</strong> 
  IE11不支持解析区域设置的<code class="text-nowrap" translate="no">hourCycle</code>值，因此我们假设<code class="text-nowrap" translate="no">h12</code>
  或<code class="text-nowrap" translate="no">h23</code>基于解析的<code class="text-nowrap" translate="no">hour12</code>值。
</p>
<h3 id="forcing-12-or-24-hour-interface" class="bv-no-focus-ring"><span class="bd-content-title">Forcing 12 or 24 hour interface 强制12或24小时接口<a class="anchorjs-link" href="#forcing-12-or-24-hour-interface" aria-labelledby="forcing-12-or-24-hour-interface"></a></span></h3>
<p>
  12小时输入与24小时输入由客户端浏览器的默认语言环境（或从语言环境属性解析的语言环境）决定。要强制12小时用户界面，请将prop <code class="text-nowrap" translate="no">hour12</code>
  设置为<code class="text-nowrap" translate="no">true</code>。
  要强制24小时用户界面，请将prop <code class="text-nowrap" translate="no">hour12</code>
  设置为<code class="text-nowrap" translate="no">false</code>。prop <code class="text-nowrap" translate="no">hour12</code>的默认值为<code class="text-nowrap" translate="no">null</code>，它使用解析的区域设置来确定要使用哪个接口。
</p>
<p>
  <code class="text-nowrap" translate="no">hour12</code>属性的设置将影响解析哪个<a href="#understanding-the-hourcycle" class="font-weight-bold"><code class="text-nowrap" translate="no">hourCycle</code></a>
  以格式化hours微调按钮。请注意，虽然这可能会影响小时微调按钮的格式，但由于客户端对特定区域设置的Intl.DateTimeFormat支持的限制，格式化的时间字符串结果可能会显示<code class="text-nowrap" translate="no">'h12</code>
  或<code class="text-nowrap" translate="no">'h23'</code>格式。因此，建议将<strong><code class="text-nowrap" translate="no">hour12</code> prop设置为<code class="text-nowrap" translate="no">null</code>（默认值）</strong>，以便显示区域设置的默认时间/小时格式。
</p>
<h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">Accessibility<a class="anchorjs-link" href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
<p>
  <code class="text-nowrap" translate="no">&lt;b-time&gt;</code>提供了许多辅助功能，如<code class="text-nowrap" translate="no">aria-live</code>区域、角色、aria标签、快捷键和全键盘导航，可用于大多数屏幕阅读器。
</p>
<p>键盘导航：</p>
<ul>
<li><kbd class="notranslate" translate="no"> 箭头向上</kbd>递增当前选定的微调按钮值</li>
<li><kbd class="notranslate" translate="no">箭头向下</kbd> 递减当前选定的微调按钮值</li>
<li><kbd class="notranslate" translate="no">Home</kbd> 将选定的微调按钮设置为最小值</li>
<li><kbd class="notranslate" translate="no">End</kbd> 将选定的微调按钮设置为最大值</li>
<li><kbd class="notranslate" translate="no">PageUp</kbd> 将选定的spinbutton值按spinbutton的步长增大一个较大的值</li>
<li><kbd class="notranslate" translate="no">PageDown</kbd> 按spinbutton的步长将选定的spinbutton值减小一个较大的值</li>
<li><kbd class="notranslate" translate="no">箭头右移</kbd>焦点到组件中的下一个旋转按钮</li>
<li><kbd class="notranslate" translate="no">箭头左移</kbd>焦点到组件中的上一个旋转按钮</li>
</ul>
<p>
  一些<code class="text-nowrap" translate="no">label-*</code>属性在屏幕上不可见，但用于为屏幕阅读器用户标记日历中的各种元素。e、g<code class="text-nowrap" translate="no">便签选择</code>的属性被添加到显示选定值的元素中。
</p>
<p>
  国际化日期选择器时，还必须使用适当的翻译字符串更新<code class="text-nowrap" translate="no">label-*</code>属性，以便国际屏幕阅读器用户能够听到正确的提示和说明。
</p>
<h2 id="implementation-notes" class="bv-no-focus-ring"><span class="bd-content-title">Implementation notes<a class="anchorjs-link" href="#implementation-notes" aria-labelledby="implementation-notes"></a></span></h2>
<p>
  <code class="text-nowrap" translate="no">&lt;b-time&gt;</code>组件基于自定义BootstrapVue组件<a href="/docs/components/form-spinbutton" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-form-spinbutton&gt;</code></a>。
</p>
<p>
  <code class="text-nowrap" translate="no">&lt;b-time&gt;</code>使用Bootstrap的margin、padding、border和flex实用程序类，以及button（<code class="text-nowrap" translate="no">btn-*</code>）类和<code class="text-nowrap" translate="no">表单控件类</code>类。BootstrapVue的自定义s CSS/CSS也是正确样式所必需的。
</p>
<h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">另请参阅<a class="anchorjs-link" href="#see-also" aria-labelledby="see-also"></a></span></h2>
<ul>
<li><a href="/docs/components/form-timepicker" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-form-timepicker&gt;</code> 时间选择器自定义表单输入</a></li>
<li><a href="/docs/components/calendar" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-calendar&gt;</code> 日历日期选择小部件</a></li>
<li><a href="/docs/components/form-datepicker" class="font-weight-bold"><code class="text-nowrap" translate="no">&lt;b-form-datepicker&gt;</code> 日期选择器自定义表单输入</a></li>
</ul>

<h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a href="/docs/components/time#component-reference" class="anchorjs-link" aria-labelledby="component-reference" target="_self"></a></span></h2>
<section data-v-3b8b9b4a="" class="bd-content">
<header data-v-3b8b9b4a="" class="row align-items-center">
<div data-v-3b8b9b4a="" class="col-sm-9">
<h3 data-v-3b8b9b4a="" id="comp-ref-b-time" tabindex="-1" class="bv-no-focus-ring"><span data-v-3b8b9b4a="" class="bd-content-title"><code data-v-3b8b9b4a="" translate="translate" class="notranslate bigger">&lt;b-time&gt;</code><a data-v-3b8b9b4a="" href="/docs/components/time#comp-ref-b-time" class="anchorjs-link" aria-labelledby="comp-ref-b-time" target="_self"></a></span></h3>
<span data-v-3b8b9b4a="" class="badge badge-success">v2.6.0+</span> </div>
<div data-v-3b8b9b4a="" class="text-sm-right col-sm-3"><a data-v-3b8b9b4a="" rel="noopener" target="_blank" href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/time/time.js" class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
</header>
<ul data-v-3b8b9b4a="" class="component-ref-mini-toc my-3">

<li data-v-3b8b9b4a=""><a data-v-3b8b9b4a="" href="#comp-ref-b-time-props"><code data-v-3b8b9b4a="" translate="translate" class="notranslate">&lt;b-time&gt;</code> 属性 </a></li>
<li data-v-3b8b9b4a=""><a data-v-3b8b9b4a="" href="#comp-ref-b-time-v-model"><code data-v-3b8b9b4a="" translate="translate" class="notranslate">&lt;b-time&gt;</code> v-model </a></li>
<li data-v-3b8b9b4a=""><a data-v-3b8b9b4a="" href="#comp-ref-b-time-slots"><code data-v-3b8b9b4a="" translate="translate" class="notranslate">&lt;b-time&gt;</code> 插槽 </a></li>
<li data-v-3b8b9b4a=""><a data-v-3b8b9b4a="" href="#comp-ref-b-time-events"><code data-v-3b8b9b4a="" translate="translate" class="notranslate">&lt;b-time&gt;</code> 事件 </a></li>

</ul>

<article data-v-3b8b9b4a="" class="bd-content">
<h4 data-v-3b8b9b4a="" id="comp-ref-b-time-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-3b8b9b4a="" class="bd-content-title"> 属性 <a data-v-3b8b9b4a="" href="/docs/components/time#comp-ref-b-time-props" class="anchorjs-link" aria-labelledby="comp-ref-b-time-props" target="_self"></a></span></h4>
<div data-v-3b8b9b4a="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped" id="__BVID__4580">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none" class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
<th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="id" class="" id="__BVID__4580__row_id">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">id</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础</td>
</tr>

<tr role="row" data-pk="value" class="" id="__BVID__4580__row_value">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">value</code>   <span data-v-3b8b9b4a="" class="badge badge-primary">v-model</span>  </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">初始选择的时间值。接受'HH:mm:ss'字符串。有效值范围从“00:00:00”到“23:59:59”`</td>
</tr>

<tr role="row" data-pk="show-seconds" class="" id="__BVID__4580__row_show-seconds">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">show-seconds</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">
  如果为true，则显示“秒”微调按钮。如果'false'，则不会显示seconds旋转按钮，时间的seconds部分始终为'0`
</td>
</tr>

<tr role="row" data-pk="hour12" class="" id="__BVID__4580__row_hour12">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">hour12</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  如果“true”，则将接口强制为12小时格式。如果“false”，则强制将接口设置为24小时格式。如果“null”，则当前区域设置将确定12小时或24小时界面（默认设置）</td>
</tr>

<tr role="row" data-pk="locale" class="" id="__BVID__4580__row_locale">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">locale</code>     </td>
<td aria-colindex="2" role="cell" class="">String or Array</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">
  组件要使用的区域设置（或区域设置）。当传递一个区域设置数组时，区域设置的顺序是从最优先到最不优先。如果未提供，则默认为客户端默认区域设置</td>
</tr>

<tr role="row" data-pk="aria-labelledby" class="" id="__BVID__4580__row_aria-labelledby">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">aria-labelledby</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""></td>
<td aria-colindex="4" role="cell" class="">为该组件提供标签的元素的ID。用作“aria labelledby”属性的值</td>
</tr>

<tr role="row" data-pk="seconds-step" class="" id="__BVID__4580__row_seconds-step">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">seconds-step</code>     </td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">1</code></td>
<td aria-colindex="4" role="cell" class="">秒微调按钮的步长值。应该是一个平均分为60的值</td>
</tr>

<tr role="row" data-pk="minutes-step" class="" id="__BVID__4580__row_minutes-step">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">minutes-step</code>     </td>
<td aria-colindex="2" role="cell" class="">Number or String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">1</code></td>
<td aria-colindex="4" role="cell" class="">分钟微调按钮的步长值。应该是一个平均分为60的值</td>
</tr>

<tr role="row" data-pk="disabled" class="" id="__BVID__4580__row_disabled">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">disabled</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置为“true”时，禁用组件的功能并将其置于禁用状态</td>
</tr>

<tr role="row" data-pk="readonly" class="" id="__BVID__4580__row_readonly">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">readonly</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置窗体控件的“readonly”属性/td>
</tr>

<tr role="row" data-pk="hide-header" class="" id="__BVID__4580__row_hide-header">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">hide-header</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class="">设置后，可视地隐藏选定的时间标题</td>
</tr>

<tr role="row" data-pk="label-no-time-selected" class="" id="__BVID__4580__row_label-no-time-selected">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-no-time-selected</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'No time selected'</code></td>
<td aria-colindex="4" role="cell" class="">未选择时间时显示的字符串</td>
</tr>

<tr role="row" data-pk="label-selected" class="" id="__BVID__4580__row_label-selected">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-selected</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'Selected time'</code></td>
<td aria-colindex="4" role="cell" class="">选择时间时仅隐藏sr字符串</td>
</tr>

<tr role="row" data-pk="label-hours" class="" id="__BVID__4580__row_label-hours">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-hours</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'Hours'</code></td>
<td aria-colindex="4" role="cell" class="">“小时”微调按钮上“aria label”属性的值</td>
</tr>

<tr role="row" data-pk="label-minutes" class="" id="__BVID__4580__row_label-minutes">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-minutes</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'Minutes'</code></td>
<td aria-colindex="4" role="cell" class="">“分钟”微调按钮上“aria label”属性的值</td>
</tr>

<tr role="row" data-pk="label-seconds" class="" id="__BVID__4580__row_label-seconds">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-seconds</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'Seconds'</code></td>
<td aria-colindex="4" role="cell" class="">“秒”微调按钮上“aria label”属性的值</td>
</tr>

<tr role="row" data-pk="label-ampm" class="" id="__BVID__4580__row_label-ampm">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-ampm</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'AM/PM'</code></td>
<td aria-colindex="4" role="cell" class="">“AM/PM”微调按钮上“aria label”属性的值</td>
</tr>

<tr role="row" data-pk="label-am" class="" id="__BVID__4580__row_label-am">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-am</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'AM'</code></td>
<td aria-colindex="4" role="cell" class="">选择“AM”时要在AM/PM微调按钮中显示的文本</td>
</tr>

<tr role="row" data-pk="label-pm" class="" id="__BVID__4580__row_label-pm">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-pm</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'PM'</code></td>
<td aria-colindex="4" role="cell" class="">选择“PM”时显示在AM/PM微调按钮中的文本</td>
</tr>

<tr role="row" data-pk="label-increment" class="" id="__BVID__4580__row_label-increment">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-increment</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'Increment'</code></td>
<td aria-colindex="4" role="cell" class="">spinbuttons`+`button上的“aria label”属性的值</td>
</tr>

<tr role="row" data-pk="label-decrement" class="" id="__BVID__4580__row_label-decrement">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">label-decrement</code>     </td>
<td aria-colindex="2" role="cell" class="">String</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">'Decrement'</code></td>
<td aria-colindex="4" role="cell" class="">spinbuttons上“aria label”属性的值“-”按钮</td>
</tr>

<tr role="row" data-pk="hidden" class="" id="__BVID__4580__row_hidden">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">hidden</code>     </td>
<td aria-colindex="2" role="cell" class="">Boolean</td>
<td aria-colindex="3" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="word-wrap-normal notranslate">false</code></td>
<td aria-colindex="4" role="cell" class=""></td>
</tr>

</tbody>

</table>
</div>
 </article>
<article data-v-3b8b9b4a="" class="bd-content">
<h4 data-v-3b8b9b4a="" id="comp-ref-b-time-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-3b8b9b4a="" class="bd-content-title"> v-model <a data-v-3b8b9b4a="" href="/docs/components/time#comp-ref-b-time-v-model" class="anchorjs-link" aria-labelledby="comp-ref-b-time-v-model" target="_self"></a></span></h4>
<div data-v-3b8b9b4a="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__4612">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="notranslate">value</code></td>
<td aria-colindex="2" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="notranslate">input</code></td>
</tr>

</tbody>

</table>
</div>
</article>
<article data-v-3b8b9b4a="" class="bd-content">
<h4 data-v-3b8b9b4a="" id="comp-ref-b-time-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-3b8b9b4a="" class="bd-content-title"> 插槽 <a data-v-3b8b9b4a="" href="/docs/components/time#comp-ref-b-time-slots" class="anchorjs-link" aria-labelledby="comp-ref-b-time-slots" target="_self"></a></span></h4>
<div data-v-3b8b9b4a="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped" id="__BVID__4621">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">插槽名称</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="default" class="" id="__BVID__4621__row_default">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="text-nowrap notranslate">default</code> </td>
<td aria-colindex="2" role="cell" class="">用于将自定义控件放置在时间组件的底部</td>
</tr>

</tbody>

</table>
</div>
</article>
<article data-v-3b8b9b4a="" class="bd-content">
<h4 data-v-3b8b9b4a="" id="comp-ref-b-time-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span data-v-3b8b9b4a="" class="bd-content-title"> 事件 <a data-v-3b8b9b4a="" href="/docs/components/time#comp-ref-b-time-events" class="anchorjs-link" aria-labelledby="comp-ref-b-time-events" target="_self"></a></span></h4>
<div data-v-3b8b9b4a="" class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__4630">

<thead role="rowgroup" class="">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" data-pk="input" class="" id="__BVID__4630__row_input">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="notranslate">input</code> </td>
<td aria-colindex="2" role="cell" class=""><ol data-v-3b8b9b4a="" class="list-unstyled mb-0">
<li data-v-3b8b9b4a=""><code data-v-3b8b9b4a="" translate="translate" class="notranslate">value</code> - <span data-v-3b8b9b4a="">以“HH:mm:ss”字符串形式选定的时间。如果未选择时间，则为空字符串</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">更新v-model的事件</td>
</tr>
<tr role="row" data-pk="context" class="" id="__BVID__4630__row_context">
<td aria-colindex="1" role="cell" class=""><code data-v-3b8b9b4a="" translate="translate" class="notranslate">context</code> </td>
<td aria-colindex="2" role="cell" class=""><ol data-v-3b8b9b4a="" class="list-unstyled mb-0">
<li data-v-3b8b9b4a=""><code data-v-3b8b9b4a="" translate="translate" class="notranslate">context</code> - <span data-v-3b8b9b4a="">上下文对象。详见文件</span></li>
</ol></td>
<td aria-colindex="3" role="cell" class="">每当内部模型状态或区域设置更新时发出。也在最初创建组件时发出</td>
</tr>

</tbody>

</table>
</div>
</article>

<h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入单个组件 <a href="/docs/components/time#importing-individual-components" class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
<p> 您可以通过以下命名的导出将单个组件导入到项目中： </p>
<div class="table-responsive-sm">
<table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped" id="__BVID__4642">

<thead role="rowgroup" class="thead-default">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">&lt;b-time&gt;</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">BTime</code></td>
<td aria-colindex="3" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>

</tbody>

</table>
</div>
<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BTime } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-time'</span>, BTime)</pre></figure>
</article>

<article class="bd-content">
<h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title"> 导入为Vue.js插件 <a href="/docs/components/time#importing-as-a-plugin" class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
<p> 该插件包括上面列出的所有单个组件。插件还包括任何组件别名。 </p>
<div class="table-responsive-sm">
<table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__4652">

<thead role="rowgroup" class="thead-default">

<tr role="row" class="">
<th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
<th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
</tr>
</thead>
<tbody role="rowgroup">

<tr role="row" class="">
<td aria-colindex="1" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">TimePlugin</code></td>
<td aria-colindex="2" role="cell" class=""><code translate="translate" class="text-nowrap notranslate">bootstrap-vue</code></td>
</tr>

</tbody>

</table>
</div>

<p><strong>示例：</strong></p>
<figure class="highlight"><pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { TimePlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(TimePlugin)</pre></figure>
</article>



</main>
</div>
</div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../../v4/dist/js/popper.min.js"></script> 
<script src="../../../v4/dist/js/bootstrap.min.js"></script> 
<script src="../../../v4/assets/js/docs.min.js"></script> 
<script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script src="../../../v4/assets/js/docsearch.min.js"></script> 
<script>
  docsearch({
    appId: 'PRR89ISST8',
    apiKey: '95044d57d4d7bb744f322d1f18ed607f',
    indexName: 'z01-bootstrapV4',
    inputSelector: '#search-input',
    handleSelected: function (input, event, suggestion) {
      var url = suggestion.url;
      url = suggestion.isLvl1 ? url.split('#')[0]: url;
      // If it's a title we remove the anchor so it does not jump.
      window.location.href = url;
    },
    transformData: function (hits) {
      return hits.map(function (hit) {
        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
        return hit;
      });
    },
    debug: false // Set debug to true if you want to inspect the dropdown
  });
</script> 
<script>
  Holder.addTheme('gray', {
    bg: '#777',
    fg: 'rgba(255,255,255,.75)',
    font: 'Helvetica',
    fontweight: 'normal'
  });
</script>
</body>
</html>
